<div class="row">
    <div class="col-md-12">
        <div class="sortOrder">
            <span class="fontSorted">Sorted By:</span>
            <span class="filters" [ngClass]="{'setFilterColor':date}" (click)="ideaListFilter('dates')">Posted On</span>
            <div [hidden]="!date" [ngClass]="{'upDown':date}"><span><i class="ion-arrow-up-a"
                                                                       [ngClass]="{'upDownicon':upIcon}"
                                                                       (click)="upIcon=true;downIcon=false;filterResult('ascending')"></i></span><span><i
                    class="ion-arrow-down-a" [ngClass]="{'upDownicon':downIcon}"
                    (click)="upIcon=false;downIcon=true;filterResult('descending')"></i></span></div>
            <span class="filters" [ngClass]="{'setFilterColor':alphabet}" (click)="ideaListFilter('alphabet')">Title</span>
            <div [hidden]="!alphabet" [ngClass]="{'upDown':alphabet}"><span><i class="ion-arrow-up-a"
                                                                               [ngClass]="{'upDownicon':!upIcon}"
                                                                               (click)="upIcon=false;downIcon=true;filterResult('ascending')"></i></span><span><i
                    class="ion-arrow-down-a" [ngClass]="{'upDownicon':!downIcon}"
                    (click)="upIcon=true;downIcon=false;filterResult('descending')"></i></span></div>
            <span [ngClass]="{'setFilterColor':like}" class="filters" (click)="ideaListFilter('likes')">Likes</span>
            <div [hidden]="!like" [ngClass]="{'upDown':like}"><span><i class="ion-arrow-up-a"
                                                                       [ngClass]="{'upDownicon':upIcon}"
                                                                       (click)="upIcon=true;downIcon=false;filterResult('ascending')"></i></span><span><i
                    class="ion-arrow-down-a" [ngClass]="{'upDownicon':downIcon}"
                    (click)="upIcon=false;downIcon=true;filterResult('descending')"></i></span></div>
            <span class="filters" [ngClass]="{'setFilterColor':points}" (click)="ideaListFilter('points')">Points</span>
            <div [hidden]="!points" [ngClass]="{'upDown':points}"><span><i class="ion-arrow-up-a"
                                                                           [ngClass]="{'upDownicon':upIcon}"
                                                                           (click)="upIcon=true;downIcon=false;filterResult('ascending')"></i></span><span><i
                    class="ion-arrow-down-a" [ngClass]="{'upDownicon':downIcon}"
                    (click)="upIcon=false;downIcon=true;filterResult('descending')"></i></span></div>
            <span [ngClass]="{'setFilterColor':comment}" class="filters" (click)="ideaListFilter('comment')">Comments</span>
            <div [hidden]="!comment" [ngClass]="{'upDown':comment}"><span><i class="ion-arrow-up-a"
                                                                             [ngClass]="{'upDownicon':upIcon}"
                                                                             (click)="upIcon=true;downIcon=false;filterResult('ascending')"></i></span><span><i
                    class="ion-arrow-down-a" [ngClass]="{'upDownicon':downIcon}"
                    (click)="upIcon=false;downIcon=true;filterResult('descending')"></i></span></div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="col-sm-12 filterBars" id="newId">

            <div class="col-sm-2 categoriesbox setDropdown" dropdown [dropdownToggle]="false">
                <button class="btn dropdown-toggle zoombtn leftAlign listidea" type="button" dropdown-open>
                    {{category}}
                </button>
                <ul class="dropdown-menu leftAlign set">
                    <li class="underln" (click)="category='Tags';Categories=''">Tags</li>
                    <li class="underln" (click)="category='Title';Categories='';categoriesList=[]">Title</li>
                    <li class="underlin" (click)="category='Author';Categories='';categoriesList=[]">Author</li>
                </ul>
            </div>

            <div class="col-sm-4 categoriesbox tagsDefine">

                <div class="tagdiv" *ngIf="category!='Tags'">
                    <input type="text" class="form-control" (focusout)="autoScrollFilter=true" [(ngModel)]="Categories" (ngModelChange)="autoScrollFilter=false;getIdeaCategory(Categories);" placeholder="Search By {{category}}" (keypress)="onSearchIdea($event)" />

                    <div class="autoScrollFilter" *ngIf="!autoScrollFilter">
                        <div *ngFor="let item of categoriesList" (mousemove)="Categories=item.title;">{{item.title}}
                        </div>
                    </div>
                </div>
                <div class="tagdiv" *ngIf="category=='Tags'">
                    <tag-input [(ngModel)]='inTags' [maxItems]='5' [placeholder]="optionstags.placeholder" [secondaryPlaceholder]="optionstags.secondaryPlaceholder">
                        <tag-input-dropdown [autocompleteItems]='allTags'>

                        </tag-input-dropdown>
                    </tag-input>
                </div>
                <span class="notification" *ngIf="maxTag">You can enter maximum 5 tags</span>

            </div>

            <div class="col-sm-2 dateheight setdateheight fromDates">
                <div class="date-input dateAlign" style="display: inline-block;">
                    <label class="fromDate">From Date</label>
                </div>
                <div class="col-sm-12 datealignmt">

                    <my-date-picker [options]="myDatePickerOptions" [selDate]="fromDate" (dateChanged)="onFromDateChanged($event)"></my-date-picker>

                </div>


            </div>
            <div class="col-sm-2 dateheight setdateheight toDates">
                <div class="date-input seconddatepicker dateAlign" style="display: inline-block;">
                    <label class="fromDate">To Date</label></div>
                <div class="col-sm-12 datealignmt">

                    <my-date-picker [options]="myDatePickerOptions" [selDate]="toDate" (dateChanged)="onToDateChanged($event)"></my-date-picker>
                </div>
            </div>
            <div class="col-sm-2 categoriesbox searchbutton searchBtm">
                <button type="button" class="btn btn-default btn-auth postbutton" (click)="getListOfIdea()">Search
                </button>
            </div>
        </div>

    </div>
</div>
<div class="pagination">
</div>

<idea #ideas [totalIdeas]="TotalIdeas" (deleteIdeaNotify)="deleteIdea()"></idea>
<div class="moreContent" *ngIf="showMoreIdeaButton"><span class="btn btn-default btn-aut lgn" (click)="showMoreIdea()">Show More</span>
</div>
<div class="row" *ngIf="noMoreContent">
    <div class="col-sm-12">
        <div class="titleIdea noContent">
            <h3><span> No Idea Found</span></h3>
        </div>
    </div>
</div>
<!-- <script>
    $('.tag-input__text-input').on('focus', function () {
        var uiAutoBox = $('ng2-dropdown-menu');
        $(this).parent().append(uiAutoBox);
    });
</script> -->